<template>
  <a-spin :spinning="confirmLoading">
    <a-form :form="form">
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="单一登录">
        <a-switch v-model="visibleCheck"/>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="超时登出">
        <a-input-number  v-decorator="[ 'logOutLt', {}]" /><span style="padding-left: 8px"><strong>分钟</strong></span>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="禁止访问IP"
      >
        <a-input placeholder="请输入ip黑名单，多个ip使用逗号分隔" v-decorator="[ 'blackList', {}]" />
      </a-form-item>

      <a-form-item align="center">
        <a-button type="primary" @click="handleSubmit" :disabled="confirmLoading">保存</a-button>
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script>
import { changeSysSecurityInfo, getSysSecurityInfo } from '@api/api'
import pick from 'lodash.pick'

export default {
  components : {

  },
    data () {
      return {
        confirmLoading: false,
        form: this.$form.createForm(this),
        model: {},
        visibleCheck: false,
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
      }
    },
    created () {
      this.showData();
    },
    methods : {
      showData () {
        this.form.resetFields();
        getSysSecurityInfo({id: 1}).then((res) => {
          if (res.success) {
            this.model = Object.assign({}, res.result)
            this.visibleCheck = this.model.singleSignIn === 1;
          } else {
            this.$message.warn(res.message);
          }
        }).then(() => {
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model,
              'id', 'logOutLt', 'whiteList', 'blackList'
            ));
          });
        });
      },
      handleSubmit(){
        this.form.validateFields((err, values) => {
          if (!err) {
            this.confirmLoading = true;
            let formData = Object.assign(this.model, values);
            formData.singleSignIn = this.visibleCheck ? 1 : 0;
              changeSysSecurityInfo(formData).then((res)=>{
              if(res.success){
                this.$message.success(res.message);
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.showData();
            });
          }
        });
      },
    }
  }
</script>

<style scoped>

</style>